
import { isRef, onMounted, onUnmounted, Ref, unref, watch } from "vue";

export default function useEventListener(
    target: EventTarget | Ref<EventTarget | null>,
    event: string,
    handler: (e: Event) => any) {
    // isRef()判断是否是响应式对象
    // Ref<EventTarget | null> 不是响应式的，没有addEventListener（）这个方法
    // EventTarget 是响应式的
    if (isRef(target)) {
        watch(target, (value, oldValue) => {
            oldValue?.removeEventListener(event, handler)
            value?.addEventListener(event, handler)
        })
    } else {
        onMounted(() => {
            target.addEventListener(event, handler)
        })
    }
    onUnmounted(() => {
        // unref(target)如果 target是响应式的，就会返回target对应的值，如果不是响应式的，就会返回它本身
        unref(target)?.removeEventListener(event, handler)
    })

}

